<template>
  <div class="layoutCon">
      <service-header :tab="1"></service-header>
      <div class="breadcrumb">
        <router-link class="home" to="/"></router-link> > <router-link to="/service">고객센터</router-link> > 공지사항
      </div>
      <div class="infoBox" v-loading="loading">
        <div class="top">
          <span><em>공지사항</em>{{infoData&&infoData.created_at}}</span>
          <strong>{{infoData&&infoData.title}}</strong>
        </div>
        <div class="con">
          <div class="des" v-html="infoData&&infoData.content"></div>
        </div>
        <div class="pager">
          <el-button class="btnPre" v-if="preID" @click="openDetail(preID)">이전글</el-button>
          <el-button type="primary" class="catalog" @click="goCatalog('/service/notice')">목록으로</el-button>
          <el-button class="btnNext" v-if="nextId" @click="openDetail(nextId)">다음글</el-button>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { announcementDetail } from '@/api';
import serviceHeader from '@/components/serviceHeader'

export default {
  name:'',
  components:{serviceHeader},
  props:[],
  data(){
    return {
      loading:true,
      id:0,
      infoData:null,
      nextId:0,
      preID:0,
    }
  },
  computed:{},
  created(){
    this.id=this.$route.query.id||0;
    this.id&&this.getDetail();
  },
  mounted(){},
  methods:{
    async getDetail(){
      this.loading=true;
      let res = await announcementDetail({id:this.id});
          if (res.code == 200) {
            this.infoData=res.data.data;
            this.preID=res.data.preID;       
            this.nextId=res.data.nextId;
            this.loading=false;     
          }else{
            this.back();
            this.loading=false;
          }
    },
    openDetail(id){
      this.id=id;
      this.getDetail();
    },
    back(){
      this.$router.back()
    },
    goCatalog(path){
      this.$router.push(path)
    }
  },
  watch:{
    id (val) {
      let query = this.$router.history.current.query;
      let path = this.$router.history.current.path;
      let newQuery = JSON.parse(JSON.stringify(query));
      newQuery.id = val;
      this.$router.push({ path, query: newQuery });
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/service.scss";
</style>